const salary = document.querySelector(".salary");
const age = document.querySelector(".age");
const stuCount = document.querySelector(".student_count");
const groupCount = document.querySelector(".group_count");

//1.设置用户名
function setUsername() {
  const username = document.querySelector(
    ".mb-0.text-sm.font-weight-bold.username"
  );
  //获取用户名
  if (username) {
    username.innerHTML = localStorage.getItem("username");
  } else {
    username.innerHTML = "";
  }
}
setUsername();

//2.获取学生统计页面并且携带token进行验证
async function getStudentData() {
  let res = await axios({
    url: "/dashboard",
  });
  let { overview, year, salaryData, groupData, provinceData} = res.data
  console.log(res);

  //1.1验证成功渲染数据
  for (key in overview) {
    document.querySelector(`.${key}`).innerHTML = overview[key]       
  }
  renderLine(year)
  renderPie(salaryData)
  // 6.1点击选中小组渲染数据
  groupColumn(groupData[1])
  document.querySelector("#btns").addEventListener("click", (e) => {
    let id = e.target.innerText;
    document.querySelector(".btn.btn-xs.btn-blue").classList.remove("btn-blue");
    e.target.classList.add("btn-blue");
    groupColumn(groupData[id]);
  });
  genderSalary(salaryData)
  renderProvince(provinceData)
}
getStudentData();

// 4.折线图渲染
function renderLine(year) {
  const myChart = echarts.init(document.querySelector("#line"));
  const option = {
    title: {
      text: "2024全学科薪资走势",
      textStyle: {
        fontSize: 14,
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: year.map((item) => item.month),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: year.map((item) => item.salary),
        type: "line",
        smooth: true,
        symbolSize: 8,
        lineStyle: {
          width: 6,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#4b9dea", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#5d7ef5", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#89bbff", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}
//5.饼图渲染
function renderPie(salaryData) {
  // console.log(salaryData)

  // 初始化实例
  const dom = document.querySelector("#salary");
  const myChart = echarts.init(dom);

  // 定义属性和数据
  const option = {
    title: {
      text: "班级薪资分布",
      left: 10,
      top: 15,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      // top: '5%',
      // 离容器下侧的距离
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "班级薪资分布",
        // type=pie 饼图
        type: "pie",
        // 数组的第一项是内半径，第二项是外半径
        radius: ["55%", "70%"],
        // 图形样式
        itemStyle: {
          // 半径
          borderRadius: 15,
          // 颜色
          borderColor: "#fff",
          // 粗细
          borderWidth: 2,
        },
        // 高亮状态的扇区和标签样式
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 100,
        //     fontWeight: 'bold'
        //   }
        // },
        // 饼状图说明文本
        label: {
          show: false,
          // show: true,
          // position: 'center'
        },
        // 说明文本的指引线
        labelLine: {
          show: false,
          // show: true
        },
        // 是否启用防止标签重叠策略，默认开启
        // avoidLabelOverlap: false,
        data: salaryData.map((v) => {
          return {
            value: v.g_count + v.b_count,
            name: v.label,
          };
        }),
        //   [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
      },
    ],
    // 颜色
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
  };

  // 根据属性和数据绘制图表
  myChart.setOption(option);
}
//6.数据看板-每组薪资

//6.2数据渲染
function groupColumn(groupData) {
  const dom = document.querySelector("#lines");
  const myChart = echarts.init(dom);
  console.log(groupData);

  const option = {
    // legend: {},
    tooltip: {
      trigger: "axis",
    },
    dataset: {
      dimensions: ["product", "期望薪资", "就业薪资"],
      source: groupData.map((v) => ({
        product: v.name,
        期望薪资: v.hope_salary,
        就业薪资: v.salary,
      })),

      //   { product: '马牛逼', 2015: 43.3, 2016: 85.8},
      //   { product: 'Milk Tea', 2015: 83.1, 2016: 73.4},
      //   { product: 'Cheese Cocoa', 2015: 86.4, 2016: 65.2},
      //   { product: 'Walnut Brownie', 2015: 72.4, 2016: 53.9 }
      // ]
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#36D79F", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#D0F4E6", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#50A3EE", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#D0EAFD", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}
//7.数据看板-男女薪资分布
function genderSalary(salaryData) {
  const dom = document.querySelector("#gender");
  const myChart = echarts.init(dom);
  const option = {
    tooltip: {
      trigger: "item",
    },
    // 不写legend 不会显示图例组件
    // legend: {
    //   top: '5%',
    //   left: 'center'
    // },
    // 颜色
    color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
    // 标题，通过数组设置多个
    title: [
      {
        text: "男女薪资分布",
        left: 10,
        top: 10,
        // text属性的样式
        textStyle: {
          // 文字的大小
          fontSize: 16,
        },
      },
      {
        text: "男生",
        left: "50%",
        top: "45%",
        textStyle: {
          fontSize: 12,
        },
        textAlign: "center",
      },
      {
        text: "女生",
        left: "50%",
        top: "85%",
        textStyle: {
          fontSize: 12,
        },
        textAlign: "center",
      },
    ],
    series: [
      {
        type: "pie",
        radius: ["20%", "30%"],
        // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
        center: ["50%", "30%"],
        data: salaryData.map((v) => {
          return { value: v.b_count, name: v.label };
        }),
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
      },
      {
        type: "pie",
        radius: ["20%", "30%"],
        center: ["50%", "70%"],
        data: salaryData.map((v) => {
          return { value: v.g_count, name: v.label };
        }),
        // data: [
        //   { value: 1048, name: 'Search Engine' },
        //   { value: 735, name: 'Direct' },
        //   { value: 580, name: 'Email' },
        //   { value: 484, name: 'Union Ads' },
        //   { value: 300, name: 'Video Ads' }
        // ]
      },
    ],
  };
  myChart.setOption(option);
}
//8.数据看板-籍贯分布
function renderProvince(provinceData){
  const dom = document.querySelector('#map')
  const myEchart = echarts.init(dom)
  const dataList = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 },
  ]
  for(let i=0;i<dataList.length;i++){
    for(let j=0;j<provinceData.length;j++){
      if(provinceData[j].name.includes(dataList[i].name)){
        dataList[i].value = provinceData[j].value
      }
    }
  }
  console.log(dataList)
  const option = {
    title: {
      text: '籍贯分布',
      top: 10,
      left: 10,
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} 位学员',
      borderColor: 'transparent',
      backgroundColor: 'rgba(0,0,0,0.5)',
      textStyle: {
        color: '#fff',
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: 'left',
      bottom: '20',
      text: ['6', '0'],
      inRange: {
        color: ['#ffffff', '#0075F0'],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: 'china',
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: '10',
          color: 'rgba(0,0,0,0.7)',
        },
      },
      itemStyle: {
        normal: {
          borderColor: 'rgba(0, 0, 0, 0.2)',
          color: '#e0ffff',
        },
        emphasis: {
          areaColor: '#34D39A',
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
    series: [
      {
        name: '籍贯分布',
        type: 'map',
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}

